<template>
    <div class="countorder">
        <!-- 时间范围 -->
        <el-form>
            <el-form-item label="时间范围">
                <el-date-picker v-model="value1" size=mini type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-button type="primary" @click="onSubmit" size="mini" style="margin-left:20px">查询</el-button>
            </el-form-item>

        </el-form>

        <!-- 数据图表 -->
        <section class="main" ref="main">

        </section>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    destroyed () {
        window.onresize = null
    },
    mounted () {
        //重置大小
        window.onresize = function () {
            myChart.resize()
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.main);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '商品统计'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['快餐', '熟食', '奶制品', '炒菜', '烧烤']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '快餐',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '熟食',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '奶制品',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '炒菜',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '烧烤',
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        });
    },
    data () {
        return {
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        }
    },
    methods: {
        onSubmit () {
            console.log(this.value1);
        },
    }
}
</script>

<style lang="less" scoped>
.countorder {

    // 数据图表
    .main {
        margin-top: 40px;
        width: 100%;
        height: 500px;

    }
}
</style>